<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="value in arr1">
            <p v-for="v in value">{{v}}</p>
        </div>
        <hr>
        <ul>
            <li v-for="value in arr2">
                <span>name:{{value.name}}</span>
                <span>age:{{value.age}}</span>
                <span>gender:{{value.gender}}</span>
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(value,index) in arr2">
                {{index+1}}
                <span v-for="(v,k) in value">{{k+":"+v}} </span>
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="value in obj.item1">
                <p>{{value}}</p>
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="value in obj">
                <p v-for="v in value">{{v}}</p>
            </li>
        </ul>
        <hr>
        <ul v-for="value in obj">
            <li v-for="v in value">{{v}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr1:[
                    [1,2,3],
                    [11,22,33],
                    [111,222,333],
                    [1111,2222,3333]
                ],
                arr2:[
                    {name:"clearlove",age:27,gender:"M"},
                    {name:"iboy",age:20,gender:"M"},
                    {name:"xiaoyu",age:22,gender:"F"}
                ],
                obj:{
                    item1:[1,2,3,4],
                    item2:[11,22,33,44],
                    item3:[111,222,333,444]
                }
            },
            methods:{

            }
        })
    </script>
</body>
</html>